<template>
  <div class="win">
    <form @submit="submit">
      <div class="input_box">
        <input
          type="text"
          v-model="inputName"
          placeholder="请输入员工姓名(最多4个字符)"
          maxlength="4"
          placeholder-style="color:#C3C3C3"
        />
        <input
          type="text"
          v-model="inputJob"
          placeholder="请输入员工岗位(最多6个字符)"
          maxlength="6"
          placeholder-style="color:#C3C3C3"
        />
        <input
          type="text"
          v-model="inputPhone"
          placeholder="请输入员工手机号"
          maxlength="11"
          placeholder-style="color:#C3C3C3"
        />
      </div>
      <div class="btn_box">
        <button form-type="submit">保存</button>
        <button @click="getDeltleStaff" v-if="type==1">删除</button>
      </div>
    </form>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      type: 0, //判断添加还是编辑
      inputName: "", //姓名
      inputJob: "", //工作岗位
      inputPhone: "", //手机号
      staff_id: "" //员工ID
    };
  },
  methods: {
    // 请求接口创建员工
    getAddStaff() {
      this.$ajax("/home/staff/create", "post", {
        name: this.inputName,
        job: this.inputJob,
        phone: this.inputPhone
      })
        .then(res => {
          if (res.status) {
            wx.navigateBack({});
            // this.hr_staffManagement();
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    // 请求接口编辑员工
    getEditStaff() {
      if (this.staff_id != undefined) {
        this.$ajax("/home/staff/staff_detail", "post", {
          staff_id: this.staff_id
        })
          .then(res => {
            if (res.status) {
              this.inputName = res.data.name;
              this.inputJob = res.data.job;
              this.inputPhone = res.data.phone;
            } else {
            }
          })
          .catch(err => {});
      }
    },
    // 请求接口修改员工
    getReviseStaff() {
      this.$ajax("/home/staff/write", "post", {
        staff_id: this.staff_id,
        name: this.inputName,
        job: this.inputJob,
        phone: this.inputPhone
      })
        .then(res => {
          if (res.status) {
            this.$toast({
              content: "保存成功"
            });
            wx.navigateBack({});
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    // 请求接口员工删除
    getDeltleStaff() {
      this.$ajax("/home/staff/del", "post", {
        staff_id: this.staff_id
      })
        .then(res => {
          
          if (res.status) {
            this.$toast({
              content: "删除成功"
            });
            wx.navigateBack({});
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    // 判断手机号
    isPhone(inputPhone) {
      return !(!/^(1[3-9])\d{9}$/.test(inputPhone) || inputPhone == "");
    },
    submit(e) {
      // let form_id = e.mp.detail.formId;
      if (this.inputName == "")
        return this.$toast({
          content: "请输入姓名"
        });
      if (this.inputJob == "")
        return this.$toast({
          content: "请输入工作岗位"
        });
      if (!this.isPhone(this.inputPhone))
        return this.$toast({
          content: "请输入有效手机号码"
        });

      if (this.staff_id != undefined) {
        this.getReviseStaff();
      } else {
        this.getAddStaff();
      }
    },
    // 跳转到员工管理页
    hr_staffManagement() {
      wx.navigateTo({
        url: "../staffManagement/main"
      });
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.type = e.type;
    this.staff_id = e.staff_id;
    this.getEditStaff();
  }
};
</script>

<style lang="scss" scoped>
.win {
  .input_box {
    input {
      box-shadow: 4rpx 6rpx 16prx 0rpx rgba(119, 119, 119, 0.25);
      width: 669rpx;
      height: 70rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 20rpx;
      margin: 7% auto 0;
      font-size: 30rpx;
      color: #4d4d4d;
      padding: 0 24rpx;
    }
  }
  .btn_box {
    margin-top: 15vh;
    button {
      line-height: 92rpx;
      color: #ffffff;
      font-size: 40rpx;
      margin: 7% auto 0;
      width: 692rpx;
      height: 92rpx;
      background: linear-gradient(
        0deg,
        rgba(11, 208, 94, 1),
        rgba(11, 208, 173, 1)
      );
      border-radius: 46rpx;
    }
  }
}
</style>
